<template>
  <h2>{{ title }}</h2>
  <el-skeleton
    animated
    :rows="5"
    :count="3"
    :loading="changeLogLoading"
    :throttle="500"
  >
    <template #template>
      <el-skeleton-item variant="h3" style="width: 20%" />
      <el-divider></el-divider>
      <el-skeleton-item variant="p" style="width: 15%" />
      <br />
      <el-skeleton-item variant="p" style="width: 40%" />
      <br />
      <el-skeleton-item variant="p" style="width: 40%" />
      <br />
      <el-skeleton-item variant="p" style="width: 40%" />
      <br />
      <br />
    </template>
    <template #default>
      <el-timeline v-if="changeLogList && changeLogList.length > 0">
        <el-timeline-item
          v-for="(item, index) in changeLogList"
          :key="index"
          :type="index === 0 ? 'success' : ''"
          :timestamp="item.date"
          placement="top"
        >
          <h2>{{ item.version }}</h2>
          <el-divider></el-divider>
          <template v-if="item.featList && item.featList.length > 0">
            <h3>Features</h3>
            <ul class="content-list">
              <li v-for="(content, contentIndex) in item.featList" :key="contentIndex">
                {{ content }}
              </li>
            </ul>
          </template>
          <template v-if="item.bugFixList && item.bugFixList.length > 0">
            <h3>Bug Fixes</h3>
            <ul class="content-list">
              <li v-for="(content, contentIndex) in item.bugFixList" :key="contentIndex">
                {{ content }}
              </li>
            </ul>
          </template>
          <template v-if="item.depUpgList && item.depUpgList.length > 0">
            <h3>Dependency Upgrades</h3>
            <ul class="content-list">
							<li v-for="(content, contentIndex) in item.bugFixList" :key="contentIndex">
								{{ content }}
							</li>
            </ul>
          </template>
        </el-timeline-item>
      </el-timeline>
      <el-empty v-else description="暂无变更日志"></el-empty>
    </template>
  </el-skeleton>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import { getChangeLogList } from '@/api/changeLog'

const state = reactive({
  title: import.meta.env.VITE_APP_TITLE,
  changeLogLoading: false,
  changeLogList: []
})

state.changeLogLoading = true
getChangeLogList()
  .then(res => (state.changeLogList = res.data))
  .finally(() => (state.changeLogLoading = false))

const { title, changeLogLoading, changeLogList } = toRefs(state)
</script>

<style scoped>
h3 {
  margin: 10px 0;
}

.content-list {
  list-style-type: disc;
}

.content-list li {
  padding: 5px;
}
</style>
